import { FieldObject } from "@/type/global";
import { Button, message, Tooltip } from "antd";
import Upload from "antd/lib/upload/Upload";
import { useState } from "react";
import * as XLSX from 'xlsx';

const ExcelImport: React.FC<{ onOk: (value: FieldObject[]) => void }> = (props) => {

    const [fileList, setFileList] = useState<any>();

    function onBeforeUpload(file: any) {
        // 获取上传的文件对象
        const { file: files } = file;
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        fileReader.onload = event => {
            try {
                const { result }: any = event.target;
                // 以二进制流方式读取得到整份excel表格对象
                const workbook = XLSX.read(result, { type: 'binary' });
                // 存储获取到的数据
                let data: any = [];
                // 遍历每张工作表进行读取（这里默认只读取第一张表）
                for (const sheet in workbook.Sheets) {
                    // esline-disable-next-line
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        // 利用 sheet_to_json 方法将 excel 转成 json 数据
                        data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }
                // 最终获取到并且格式化后的 json 数据
                message.success('导入成功!');
                setFileList([]);
                const objList: FieldObject[] = [];
                Object.keys(data[0]).forEach((item, index) => {
                    if (item != '__rowNum__') {
                        objList[index] = {
                            fieldName: item,
                            fieldType: 'varchar'
                        }
                    }
                })
                props.onOk(objList);
            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                message.error('文件类型不正确！');
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files);
        return true;
    }

    return <div style={{ marginLeft: '12px' }}>
        <Tooltip title="excel 导入">
            <Upload fileList={fileList} accept=".xlsx,.xls" action="" customRequest={onBeforeUpload}>
                <Button type="primary">excel 导入</Button>
            </Upload>
        </Tooltip>
    </div>
}

export default ExcelImport
